import React from "react"
import { StyleSheet, Image, Pressable, Text, View } from "react-native"
import { colors } from "app/theme"

type SelectOptionButtonProps = {
  icon?: React.ReactElement
  selectedText: string
  onPress: () => void
}

export const SelectOptionButton = ({ icon, selectedText, onPress }: SelectOptionButtonProps) => {
  return (
    <Pressable onPress={onPress}>
      <View style={styles.container}>
        <Text style={{color:colors.black}}>{selectedText}</Text>
        {icon && icon}
      </View>
    </Pressable>
  )
}

const styles = StyleSheet.create({
  icon: {
    height: 20,
    width: 20,
  },
  container: {
    height: 48,
    borderColor: colors.border,
    borderWidth: StyleSheet.hairlineWidth * 2,
    borderRadius: 4,
    paddingHorizontal: 8,
    justifyContent: "space-between",
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: colors.white,
  },
})
